<template>
  <header class="bili-header">
    <BiliSvg
      icon="icon-bilibili"
      @click="router.push('/')"
      :width="60"
      :height="26"
      class="c-primary"
    />
    <Divider type="vertical" />
    <div class="logo-title">{{ title }}</div>
    <Input class="mx-auto w-[500px]" v-model:value="searchValue">
        <template #suffix>
          <Search />
        </template>
    </Input>
    <Switch
      class="ml-auto mr-2"
      v-if="modeStore.nodeEnv === 'development'"
      :checked="modeStore.current === ModeEnum.DEV"
      @update:checked="
        (e) => modeStore.setMode(Boolean(e) ? ModeEnum.DEV : ModeEnum.PROD)
      "
      size="small"
    />
    <Avatar :size="30" :src="state.avatar || defaultAvatar" />
  </header>
</template>
<script setup lang="ts">
import {
  Avatar, Divider, Input, Switch,
} from 'ant-design-vue';
import { Search } from 'lucide-vue-next';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import defaultAvatar from '@/assets/imgs/avatar.png';
import useModeStore, { ModeEnum } from '@/stores/mode.store';

import BiliSvg from './BiliSvg.vue';

defineProps({
  title: {
    type: String,
    required: true,
  },
});

const modeStore = useModeStore();
const state = ref({ username: '', avatar: '' });

const router = useRouter();

const searchValue = ref('');
</script>
<style scoped>
.bili-header {
  height: inherit;
  display: flex;
  align-items: center;
  padding: 0 24px;
  box-shadow: inset 0 -1px 0 var(--color-grey)!important;
}

.logo-title {
  font-size: 18px;
  color: var(--color-primary);
  font-family: 'bangbang';
  margin-right: 52px;
}
</style>
